/**
 *  Created by clz on
 *  Function:
 *  Desc:
 */
import React, {Component} from 'react';
import {View, StyleSheet, LayoutAnimation, Animated, Image,Easing} from 'react-native';

export default class Animation extends Component {
    constructor(props) {
        super(props);
        this.state = {
            width: parseInt(this.props.width),
            height: parseInt(this.props.height),
            bounceValue: new Animated.Value(0),//初始缩放为0
            rotateValue: new Animated.Value(0)
        };
    }

    componentDidMount() {
        this._startAnimation();
    }

    _startAnimation() {
        //LayoutAnimation
        // LayoutAnimation.configureNext({
        //     duration: 1000,
        //     create: {
        //         type: LayoutAnimation.Types.spring,
        //         property: LayoutAnimation.Properties.scaleXY
        //     },
        //     update: {
        //         type: LayoutAnimation.Types.spring,
        //     }
        // });
        //
        // LayoutAnimation.spring();

        // this.setState({
        //     width: this.state.width + 100,
        //     height: this.state.height + 100
        // });
        // Animated API
        //可选的动画类型:spring:弹跳,timing:渐变,decay:以一个初始速度开始并且逐渐减慢停止
        // Animated.spring(this.state.bounceValue, {
        //     toValue: 1,
        //     speed: 5
        // }).start();
        //串行动画
        // Animated.sequence([
        //     Animated.spring(this.state.bounceValue,{toValue:1}),
        //     Animated.delay(500),
        //     Animated.timing(this.state.rotateValue,{
        //         toValue:1,
        //         duration:800,
        //         easing: Easing.out(Easing.quad)
        //     })
        // ]).start();
        //并行动画
        Animated.parallel([
            Animated.spring(this.state.bounceValue,{toValue:1}),
            Animated.timing(this.state.rotateValue,{
                toValue:1,
                duration:1500,
                easing: Easing.out(Easing.quad)
            })
        ]).start();
    }

    render() {
        return (
            <Animated.View style={[styles.animation, {
                width: this.state.width,
                height: this.state.height,
                transform: [
                    {
                        scale: this.state.bounceValue
                    },
                    {
                        rotate:this.state.rotateValue.interpolate(
                            { inputRange:[0,1],
                            outputRange:['0deg','360deg']}
                        )
                    }
                ]
            }]}>
            <Image source={ require('./../../image/reba.jpg')}
                   // resizeMode={'stretch'}
                   style={{
                       width: this.state.width,
                       height: this.state.height,
                   }}/>
            </Animated.View>
        )
    }

}
const styles = StyleSheet.create({
    animation: {
        backgroundColor: 'red'
    }
});
